import React, {useEffect, useRef} from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import wordcloud from 'highcharts/modules/wordcloud';
import { useTranslation } from 'react-i18next';

wordcloud(Highcharts)

const WordCloud = ({wordCloudData}) => {
    const { t } = useTranslation();
    const options = {
        chart: {
            style: {
                fontSize: '1em'
            },
        },
        accessibility: {
            screenReaderSection: {
                beforeChartFormat: '<h5>{chartTitle}</h5>' +
                    '<div>{chartSubtitle}</div>' +
                    '<div>{chartLongdesc}</div>' +
                    '<div>{viewTableButton}</div>'
            }
        },
        series: [{
            type: 'wordcloud',
            data: wordCloudData,
            name: 'Occurrences'
        }],
        title: {
            text: t('Most searched information on the site'),
            // align: 'left'
        },
        subtitle: {
            text: t('Updated on the 1st of each month'),
            align: 'left'
        },
        tooltip: {
            headerFormat: '<span style="font-size: 16px"><b>{point.key}</b>' +
                '</span><br>'
        },
        credits: {
            // 是否显示版权链接
            enabled: false
        }
    };

    return (
        <HighchartsReact
            highcharts={Highcharts}
            options={options}
        />
    );
};

export default WordCloud;